<template>
  <div class="select-box">
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="输入标题搜索">
        <el-input v-model="selectData.text" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="dataList.comList" border style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="good_id" label="分类ID" />
    <el-table-column prop="good_pic" label="分类图片" />
    <el-table-column prop="text" label="分类名称" />
    <el-table-column prop="add_time" label="添加时间" />
    <el-table-column label="操作">
         <template #default="scope">
            <el-button link type="primary" size="small" @click="update(scope.row)">编辑</el-button>
         </template>
      </el-table-column>
  </el-table>
  <!--分页查询-->
    <pagination :total="selectData.count" @change-page='changePage' @change-pageSize='changePageSize'/>
  <!--对话框-->
  <el-dialog
    v-model="isShow"
    title="分类修改"
    width="30%"
    align-center
  >
    <el-form  :model="activeList">
      <el-form-item label="id:">
        <el-input v-model="activeList.id" :disabled="true"/>
      </el-form-item>
      <el-form-item label="分类ID:">
        <el-input v-model="activeList.good_id" :disabled="true"/>
      </el-form-item>
      <el-form-item label="分类图片:">
        <el-input v-model="activeList.good_pic"/>
      </el-form-item>
      <el-form-item label="分类名称:">
        <el-input v-model="activeList.text"/>
      </el-form-item>
      <el-form-item label="添加时间:">
        <el-input v-model="activeList.add_time"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onUpdate">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { tsGetClassList, tsUpdateClass } from "../api/tsApi";
import { ClassData, ClassInt } from "../type/class";
import pagination from "../components/pagination.vue"
export default defineComponent({
  components: { pagination },
  setup() {
    const data = reactive(new ClassData());
    
    onMounted(()=>{
      getClassList();
    })

    const getClassList = ()=>{
      tsGetClassList({ type: 1 }).then((res) => {
      data.selectData.count = res.data.length;
      data.list = res.data;
    });
    }


    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice(
          (data.selectData.page - 1) * data.selectData.pageSize,
          data.selectData.page * data.selectData.pageSize
        );
      }),
    });

    const changePage = (page)=>{
      data.selectData.page = page
    }

    const changePageSize = (pageSize)=>{
      data.selectData.pageSize = pageSize
    }
    

    //搜索必须配上watch函数监听。重置数组
    const onSubmit = () => {
      let arr: ClassInt[] = [];
      if (data.selectData["text"]) {
        arr = data.list.filter((value) => {
          return value["text"].indexOf(data.selectData["text"]) !== -1;
        });
      } else {
        arr = data.list;
      }
      data.selectData.count = arr.length;
      data.list = arr;
    };

    watch([() => data.selectData.text,()=> data.isShow], () => {
      if (data.selectData.text === "" || data.isShow === false) {
        getClassList();
      }
    });

    const update = (row:ClassInt)=>{
      data.activeList = {
        id: row.id,
        type: 1,
        text: row.text,
        good_pic: row.good_pic,
        good_id: row.good_id,
        add_time: row.add_time
      }
      data.isShow = true
    }

    const onUpdate = ()=>{
      tsUpdateClass(data.activeList).then(result=>{
        if(result["code"]===1){
          ElMessage.success(result["msg"])
          data.isShow = false
        }
      })
    }

    return { ...toRefs(data), dataList, changePage, changePageSize, onSubmit, update, onUpdate };
  },
});
</script>

<style scoped>
</style>